<template>
	<view style="display: flex;flex-direction: column;">
		<view class="top-group-view">
			<view @click="backClick()" class="top-title-view" :style="'height: '+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<image class="back-img-view" src="../../static/login/icon_back.png"></image>
			</view>
		</view>
		<view class="top-group-native" :style="'opacity: '+opacitySize+';'">
			<view class="top-title-view" :style="'height: '+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<text class="title-text">商品详情</text>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;">
			<uni-home-banner :imgList="homeSlide" :height="windowWidth" :radius="0"></uni-home-banner>
			<view class="goods-info-view">
				<view style="display: flex;margin-top: 24rpx;align-items: center;">
					<text class="goods-unit" style="margin-left: 24rpx;margin-top: 2rpx;">¥</text>
					<text class="goods-unit" style="font-size: 32rpx;">{{goodsInfo.price}}</text>
					<text class="goods-type">高佣{{goodsInfo.kolCosRatio}}%</text>
					<text class="goods-cos-ratio">公开佣金{{goodsInfo.cosRatio}}%</text>
					<view style="flex: 1;"></view>
					<view class="goods-kol-Cos-Fee">赚¥{{goodsInfo.kolCosFee}}</view>
				</view>
				<view class="goods-title">{{goodsInfo.title}}</view>
				<view style="display: flex;margin: 0rpx 8rpx 8rpx 24rpx;">
					<text class="goods-sales">销售：{{goodsInfo.sales}}</text>
					<view style="flex: 1;"></view>
					<text class="goods-info-btn" @click="toMaterialDetail(goodsInfo.pid)">领取素材</text>
					<text class="goods-info-btn" @click="downloadClick(goodsInfo.cover)">下载主图</text>
					<text class="goods-info-btn" @click="copyLinkClick(goodsInfo.url)">复制链接</text>
				</view>
			</view>
			<view class="goods-info-view">
				<text class="item-group-title">热门同款视频</text>
				<view style="display: flex;margin-left: 16rpx;margin-right: 16rpx;">
					<scroll-view class="hot-video-group" scroll-x="true">
						<block v-for="(item,index) in hotVideoList" :key="index" >
							<view class="item-video-group" @click="videoItemClick(item.awemeId)">
								<view style="width: 30vw;height: 30vw;position: relative;">
									<image class="item-original-img" :src="item.cover"></image>
									<view class="item-original-smegma"></view>
									<view class="item-original-play">
										<image src="../../static/material/icon_play.png"></image>
										<text>{{item.playCount}}</text>
									</view>
									<image class="item-original-icon" src="../../static/material/icon_video.png"></image>
								</view>
								<view style="display: flex;margin-top: 16rpx;align-items: center;justify-content: center;">
									<image :src="item.avatar" class="item-public-avater"></image>
									<text class="item-public-name">{{item.nickName}}</text>
								</view>
								<view style="display: flex;margin-top: 16rpx;align-items: center;justify-content: center;">
									<text class="item-fans">粉丝数：{{item.fans}}</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<view style="display: flex;margin: 32rpx 24rpx;">
					<image class="goods-store-cover" :src="shopInfo.logo"></image>
					<view style="display: flex;flex-direction: column;flex: 1;">
						<text class="item-public-name">{{shopInfo.name}}</text>
						<view style="display: flex;margin-top: 8rpx;margin-left: 16rpx;" >
							<text class="goods-store-txt">店铺体验分</text>
							<text class="goods-store-txt" style="color: #FF5733;margin-left: 16rpx;">{{shopInfo.shopScore}} {{shopInfo.shopRating}}</text>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;">
						<view style="display: flex;" >
							<text class="goods-store-txt">商品体验</text>
							<text class="goods-store-txt" style="color: #FF5733;margin-left: 16rpx;">{{shopInfo.productScore}} {{shopInfo.productRating}}</text>
						</view>
						<view style="display: flex;margin-top: 8rpx;" >
							<text class="goods-store-txt">服务体验</text>
							<text class="goods-store-txt" style="color: #FF5733;margin-left: 16rpx;">{{shopInfo.serviceScore}} {{shopInfo.serviceRating}}</text>
						</view>
						<view style="display: flex;margin-top: 8rpx;" >
							<text class="goods-store-txt">物流体验</text>
							<text class="goods-store-txt" style="color: #FF5733;margin-left: 16rpx;">{{shopInfo.logisticsScore}} {{shopInfo.logisticsRating}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-info-view">
				<view class="item-group-title">
					<text>推广数据监控</text><text style="color: #999999;">{{showTimes}}</text>
				</view>
				<view style="width: 100%;display: flex;">
					 <block v-for="(item, index) in pmtTypes" :key="index" :id="index">
						<view style="flex: 1;" v-if="index > 0"></view>
						<text @click="changeTabClick(item.value, index)" :class="currentDateType==item.value?'date-tab-native':'date-tab-normal'">{{item.name}}</text>
					</block>
				</view>	
				
				<view class="pmt-title-view" style="margin: 24rpx 24rpx 10rpx 24rpx;">
					<view class="pmt-round-view" style="background-color: #FDCDAC;"></view>
					<text>{{showSubTitle}}</text>
				</view>
				<view style="margin: 0rpx 0rpx 20rpx 32rpx;">
					<uni-line-chart ref="lineChartRef"></uni-line-chart>
				</view>
				<view class="pmt-bottom-tab">
					<text @click="changePmtClick(1)" :class="currentPmtType===1?'pmt-tab-native':'pmt-tab-normal'">销量</text>
					<text @click="changePmtClick(2)" :class="currentPmtType===2?'pmt-tab-native':'pmt-tab-normal'">转化率</text>
					<text @click="changePmtClick(3)" :class="currentPmtType===3?'pmt-tab-native':'pmt-tab-normal'">推广次数</text>
				</view>	
			</view>
			<view class="goods-info-view" v-if="detailImage.length>0">
				<text class="item-group-title">商品详情</text>
				<view v-for="(item, index) in detailImage" :key="index" :id="index" style="font-size:0;width: 100%;">
					<image :src="item" style="width: 100%;margin-bottom: 0px;display:block;" mode="widthFix"></image>
				</view>
				<view style="height: 32rpx;"></view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="bottom-group-view">
			<view style="display: flex;" @click="onCollectClick()">
				<image class="collect-img" :src="isCollect?'../../static/selection/ic_collect_selected.png':'../../static/selection/ic_collect_noraml.png'"></image>
				<text class="collect-text" :style="isCollect?'color: #FF5733':'color: #999999'">{{isCollect?"已收藏":"收藏"}}</text>
			</view>
			<view style="flex: 1;"></view>
			<text class="add-showcase-btn" @click="chooseAccount(goodsInfo.pid)">添加橱窗</text>
			<text class="receive-material-btn" @click="toMaterialDetail(goodsInfo.pid)">领取素材</text>
		</view>
	</view>
</template>

<script>
	import configUrls from '@/common/config.js';
	import uniHomeBanner from '@/components/uni-home/uni-home-banner.vue';
	import uniLineChart from '@/components/uni-home/uni-line-chart.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	
	import * as echarts from '@/components/lime-echart/static/echarts.min.js';
	import lEchart from '@/components/lime-echart/components/l-echart/l-echart.vue';
	export default {
		data() {
			return {
				opacitySize: 0,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				navHeight: 0,
				windowWidth: 0,
				goodsId: "",
				homeSlide: [],
				goodsInfo: {},
				shopInfo: {},
				hotVideoList: [],
				isCollect: false,
				showTimes: "",
				showSubTitle: "近30日总销量",
				xDataList: [],
				yDataList: [],
				currentPmtType: 1,
				currentDateType: 0,
				currentPmtInfo: {},
				detailImage: [],
				pmtTypes: [],
				choosePid: '',
				accountInfo: {nickName: "账号名称", displayId: ""},
			}
		},
		components:{
			uniPopup,
			uniHomeBanner,
			uniLineChart,
			lEchart
		},
		onLoad(options) {
			wx.getSystemInfo({
				success: (res) => {	
					this.windowWidth = res.windowWidth;
				}
			});
			if (options.goodsId){
				this.goodsId = options.goodsId;
				this.getSelectionDetail();
				this.getSelectionVideo();
				this.getPmtType();
			}
		},
		onReady() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
			this.navHeight = this.iStatusBarHeight + this.navigationBarHeight;
		},
		methods: {
			getPmtType() {
				let that = this;
				this.$Request.postJson(configUrls.getPmtType, {
				}).then(res => {
					if (res.code == "10000") {
						that.pmtTypes = res.data.result;
						// console.log("pmtTypes****************"+JSON.stringify(that.pmtTypes))
						if(that.pmtTypes.length>0) {
							that.currentPmtInfo = that.pmtTypes[0];
							that.currentDateType = that.pmtTypes[0].value;
							that.getSelectionPmt();
						}
					} 
				}); 
			},
			getSelectionDetail() {
				let that = this;
				this.$Request.postJsonLoadView(configUrls.getSelectionDetail, {
					pid: that.goodsId
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result;
						that.goodsInfo = respData;
						that.shopInfo = respData.shop;
						that.homeSlide = respData.images;
						that.isCollect = respData.collect;
						that.detailImage = respData.detailImage;
					} 
				}); 
			},
			getSelectionVideo() {
				let that = this;
				this.$Request.postJson(configUrls.getSelectionVideo, {
					id: that.goodsId
				}).then(res => {
					if (res.code == "10000") {
						that.hotVideoList = res.data.result.data;
					} 
				}); 
			},
			getSelectionPmt() {
				let that = this;
				this.$Request.postJson(configUrls.getSelectionPmt, {
					id: that.goodsId,
					type: that.currentDateType,
				}).then(res => {
					if (res.code == "10000") {
						that.pmtInfo = res.data.result;
						that.showCurrentPmtView(1);
					} 
				}); 
			},
			showCurrentPmtView(index) {
				if (index == 1) {
					this.showSubTitle = this.currentPmtInfo.name + "总销量" + this.pmtInfo.totalSales;
				} else if (index == 2) {
					this.showSubTitle = this.currentPmtInfo.name + "总转化率" + this.pmtInfo.totalCvr +"%";
				} else if (index == 3) {
					this.showSubTitle = this.currentPmtInfo.name + "总推广次数" + this.pmtInfo.totalKolNum;
				}
				let data = this.pmtInfo.data;
				this.xDataList = [];
				this.yDataList = [];
				let startTime = "", endTime = "";
				for (let position=0;position<data.length;position++) {
					if (index == 1) {
						this.xDataList.push(data[position].addTime);
						this.yDataList.push(data[position].sales);
					} else if (index == 2) {
						this.xDataList.push(data[position].addTime);
						this.yDataList.push(data[position].cvr);
					} else if (index == 3) {
						this.xDataList.push(data[position].addTime);
						this.yDataList.push(data[position].kolNum);
					}
					if (position == 0) {
						startTime = data[position].addTime;
					} else if (position == data.length - 1) {
						endTime = data[position].addTime;
					}
				}
				this.showTimes = startTime + "-" + endTime;
				this.$refs.lineChartRef.loadLineData(this.xDataList, this.yDataList);
			},
			changePmtClick(index) {
				if (this.currentPmtType != index) {
					const items = this.currentPmtInfo.items;
					const isContains = items.findIndex(item => item == index);
					if (isContains != -1) {
						this.currentPmtType = index;
						this.showCurrentPmtView(index);
					}
				}
			},
			changeTabClick(value, index) {
				if (this.currentDateType != value) {
					this.currentDateType = value;
					this.currentPmtType = 1;
					this.currentPmtInfo = this.pmtTypes[index];
					this.getSelectionPmt();
				}
			},
			chooseAccount(id) {
				this.choosePid = id;
				//监听事件
				let that = this;
				this.$eventHub.$on('chooseAccount', function(item) {
					that.accountInfo.nickName = item.nickName;
					that.accountInfo.displayId = item.displayId;
					that.addShowcaseClick();
				       //清除监听，不清除会消耗资源
				    that.$eventHub.$off('chooseAccount');
				});
				uni.navigateTo({
					url: '/subpages/pages/chooseAccount?displayId='+this.accountInfo.displayId+"&isShowcase=true"
				})
			},
			addShowcaseClick(id) {
				let that = this;
				this.$Request.postJsonLoadView(configUrls.addSelectionStore, {
					pid: that.choosePid,
					displayId: that.accountInfo.displayId
				}).then(res => {
					if (res.code == "10000") {
						uni.showToast({
							title:'添加橱窗成功！',
							icon: 'none',
							duration:2000
						})
					} else {
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration:2000
						})
					}
				}); 
			},
			toMaterialDetail(id) {
				uni.navigateTo({
					url: '/pages/material/materialDetail?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			backClick() {
				uni.navigateBack({
					delta:1
				})
			},
			copyLinkClick(url) {
				uni.setClipboardData({
					data: url,
					success: function () {
					    uni.showToast({
					        title: "链接复制成功",
					        icon: 'none',
							duration: 2000
					    });
					}
				});
			},
			onCollectClick() {
				var collectUrl = configUrls.addCollect;
				if(this.isCollect) {
					collectUrl = configUrls.cancelCollect;
				}
				let that = this;
				this.$Request.postJsonLoadView(collectUrl, {
					targetId: that.goodsId,
					targetType: 1
				}).then(res => {
					if (res.code == "10000") {
						that.isCollect = that.isCollect?false:true;
					} 
					uni.showToast({
					    title: res.msg,
					    icon: 'none',
						duration: 2000
					});
				}); 
			},
			downloadClick(downLoadUrl) {
				if (!downLoadUrl) {
					uni.showToast({
					    title: "没找到主图资源",
					    icon: 'none',
						duration: 2000
					});
					return;
				}
				let that = this
				uni.getSetting({
					success(res) {
						console.log(res);
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success(res) {
								that.downloadFileClick(downLoadUrl);
							},
							fail() {
								uni.showModal({
									content: '请允许相册权限, 拒绝将无法正常保存图片',
									showCancel: false,
									success() {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting['scope.writePhotosAlbum']) {} else {
													console.log('获取权限失败')
													uni.showToast({
														title: "获取权限失败",
														icon: 'none',
														duration: 2000
													});
												}
											}
										})
									}
								})
							}
						})
						} else {
							that.downloadFileClick(downLoadUrl)
						}
					}
				})
			},
			downloadFileClick(url) {
				uni.showLoading({
					mask: true,
					title: '下载中...'
				})
				let fileName = new Date().valueOf();
				const task = uni.downloadFile({
					url: url,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.png', //  拼接本地文件路径
					success: (res) => {
						let filePath = res.filePath
						uni.saveImageToPhotosAlbum({
							filePath,
							success: (res) => {
								uni.showToast({
									title: '下载成功',
									icon: 'none',
									duration: 2000
								})
								let fileMgr = wx.getFileSystemManager();
								// 删除本地文件
								fileMgr.unlink({
									filePath: wx.env.USER_DATA_PATH + '/' + fileName +
										'.png',
									success: function(r) {
										console.log(r)
									},
								})
							},
							fail(err) {
								uni.showToast({
									title: '保存失败',
									icon: 'none',
									duration: 2000
								})
							},
							complete(res) {
								console.log(res)
								uni.hideLoading()
							}
						})
					},
					fail(err) {
						uni.showToast({
							title: '下载失败,请稍后再试',
							icon: 'none',
							duration: 2000
						})
					},
					complete(res) {
						console.log(res)
					}
				})
				task.onProgressUpdate(this.onProgress)
			},
			onProgress(res) {
				uni.showLoading({
					mask: true,
					title: res.progress ? '下载中' + res.progress + "%" : '下载中...'
				})
			},
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop == 0) {
				this.opacitySize = 0;
			} else if (scrollTop >= this.windowWidth) {
				this.opacitySize = 1;
			} else {
				this.opacitySize = scrollTop / this.windowWidth;
			}
		},
		onShareAppMessage () {
	        return {
		        title: this.goodsInfo.goodsName,
		        path: '/subpages/pages/selectionDetail?goodsId='+this.goodsId,
				imageUrl: this.goodsInfo.thumbnailPath,
		        success: res => {
					console.info(res)
		        }
			}
		}
	}
</script>

<style>
	@import url("../../css/selection/selectionDetail.css");
</style>
